본문으로 건너뛰기

<StrictMode>

🧑🏻‍💻 StrictMode​

<StrictMode>를 사용하면 개발 중에 컴포넌트에서 흔히 발생하는 버그를 조기에 발견할 수 있다.

✅ StrictMode 문법​

<StrictMode>
  <App />
</StrictMode>
  • 개발 전용 동작을 활성화 한다.
  • StrictMode는 주로 사이드 이펙트와 렌더링 동작에 관련된 문제점을 감지한다.
  • 애플리케이션의 어떤 컴포넌트에 대해서든 <StrictMode>로 감싸 활성화 할 수 있다.

🧑🏻‍💻 알고 가기​

✅ StrictMode 사용 시 활성화 되는 것들​

  • 불완전한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링한다.
  • Effect에 클린 함수가 없어 발생한 버그를 찾기위해 Effect를 한 번 더 실행한다.
  • 지원 중단된 API의 사용 여부를 확인한다.

✅ 주의 사항​

  • 개발 환경에서만 실행된다.
  • StrictMode는 props가 없다.
  • <StrictMode>로 감싼 트리 내부에서 Strict 모드를 해제할 수 있는 방법은 없다.

🧑🏻‍💻 활용 및 생각할 거리​

✅ 왜 순수 함수들은 두 번 호출 될까?​

  • React는 작성하는 모든 컴포넌트가 순수 함수라고 가정한다. 즉, 작성하는 React 컴포넌트는 동일한 입력(props, state, context)이 주어졌을 때 항상 동일한 JSX를 반환해야 한다.
  • 따라서 <StrictMode>는 개발 환경에서 실수로 작성한 불순한 코드를 찾을 수 있도록 다음의 일부 함수(순수 함수만)를 두 번 호출한다.

✏️ 두 번 호출되는 순수 함수들​

  • useState, set 함수, useMemo, useReducer에 전달한 함수
  • constructor, render, shouldComponentUpdate와 같은 일부 클래스 컴포넌트 메서드